<template>
  <div class="warehouse-container">
    <div class="toolbar">
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button @click="handleExport">导出</el-button>
      <el-button plain>刷新</el-button>
    </div>
    
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="序号" width="80" sortable>
        <template #default="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column prop="code" label="编码" width="120" sortable>
        <template #header>
          <div class="header-with-search">
            <span>编码</span>
            <el-input v-model="searchParams.code" placeholder="" size="small" @input="handleSearch" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" width="150" sortable>
        <template #header>
          <div class="header-with-search">
            <span>名称</span>
            <el-input v-model="searchParams.name" placeholder="" size="small" @input="handleSearch" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" width="150" sortable>
        <template #header>
          <div class="header-with-search">
            <span>类型</span>
            <el-input v-model="searchParams.type" placeholder="" size="small" @input="handleSearch" />
          </div>
        </template>
        <template #default="scope">
          <el-tag :type="getTagType(scope.row.type)">{{ scope.row.type }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="manager" label="仓管员" width="120" sortable>
        <template #header>
          <div class="header-with-search">
            <span>仓管员</span>
            <el-input v-model="searchParams.manager" placeholder="" size="small" @input="handleSearch" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址" width="150" sortable>
        <template #header>
          <div class="header-with-search">
            <span>地址</span>
            <el-input v-model="searchParams.address" placeholder="" size="small" @input="handleSearch" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述" min-width="200" />
      <el-table-column prop="creator" label="创建人" width="120" sortable>
        <template #header>
          <div class="header-with-search">
            <span>创建人</span>
            <el-input v-model="searchParams.creator" placeholder="" size="small" @input="handleSearch" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="scope">
          <el-button type="primary" text @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" text @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <span>共 {{ total }} 条数据</span>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <span>{{ currentPage }}/{{ totalPages }}</span>
      <span>{{ pageSize }}条/页</span>
      <el-button plain>跳至</el-button>
      <el-button plain>页尾</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 表格数据
const tableData = ref([
  {
    id: 1,
    code: '002',
    name: '1号仓库',
    type: '原材料与成品仓',
    manager: '(test)AAA',
    address: '生产工厂',
    description: 'test',
    creator: '(test)AAA'
  },
  {
    id: 2,
    code: '1',
    name: '26号仓库',
    type: '线边仓',
    manager: '',
    address: '',
    description: '',
    creator: '(test)AAA'
  },
  {
    id: 3,
    code: 'wxr101',
    name: '2号仓库',
    type: '原料仓',
    manager: '',
    address: '制造工厂',
    description: '',
    creator: '(test)AAA'
  },
  {
    id: 4,
    code: 'hhh',
    name: '1号仓库hhh',
    type: '原料仓',
    manager: '',
    address: '',
    description: '',
    creator: '(test)AAA'
  },
  {
    id: 5,
    code: 'WWY02',
    name: '2号仓库',
    type: '原料仓',
    manager: '',
    address: '制造工厂',
    description: '仓库 库位名称 库区位置 尺寸：2号仓库 2号库位 02 200*200*40mm',
    creator: '(test)AAA'
  },
  {
    id: 6,
    code: 'ZSQ004',
    name: '2号仓库',
    type: '原料仓',
    manager: '',
    address: '',
    description: '',
    creator: '(test)AAA'
  },
  {
    id: 7,
    code: 'LXP011',
    name: '1号生产原料仓库',
    type: '原料仓',
    manager: '',
    address: '制药工厂',
    description: '',
    creator: '(test)AAA'
  },
  {
    id: 8,
    code: 'swx001',
    name: '1号生产原料仓库',
    type: '原料仓',
    manager: '',
    address: '制药工厂',
    description: '仓库：1号生产原料仓 库位名称：1号库位 库区位置：01 尺寸：200*200*400mm',
    creator: '(test)AAA'
  },
  {
    id: 9,
    code: 'WX222',
    name: '1号生产原料仓库',
    type: '原料仓',
    manager: '',
    address: '制药工厂',
    description: '',
    creator: '(test)AAA'
  },
  {
    id: 10,
    code: '001',
    name: '1号生产原料仓库',
    type: '原材料与成品仓',
    manager: '',
    address: '制药工厂',
    description: '库位名称：1号库位 库区位置：01 尺寸：200*200*40mm',
    creator: '(test)AAA'
  }
])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(24)
const totalPages = computed(() => Math.ceil(total.value / pageSize.value))

// 搜索参数
const searchParams = reactive({
  code: '',
  name: '',
  type: '',
  manager: '',
  address: '',
  creator: ''
})

// 选中的行
const selectedRows = ref([])

// 获取标签类型
const getTagType = (type) => {
  switch (type) {
    case '原材料与成品仓':
      return 'success'
    case '线边仓':
      return 'warning'
    case '原料仓':
      return 'info'
    default:
      return ''
  }
}

// 处理选择变化
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

// 处理搜索
const handleSearch = () => {
  // 实际项目中应该调用API进行搜索
  console.log('搜索参数:', searchParams)
  currentPage.value = 1
}

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchData()
}

// 处理每页条数变化
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  fetchData()
}

// 获取数据
const fetchData = () => {
  // 实际项目中应该调用API获取数据
  console.log('获取数据，页码:', currentPage.value, '每页条数:', pageSize.value)
}

// 处理新增
const handleAdd = () => {
  // 实现新增逻辑
  console.log('新增仓库')
}

// 处理导出
const handleExport = () => {
  // 实现导出逻辑
  console.log('导出数据')
}

// 处理编辑
const handleEdit = (row) => {
  console.log('编辑行:', row)
}

// 处理删除
const handleDelete = (row) => {
  ElMessageBox.confirm(`确认删除仓库 ${row.name}?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 实际项目中应该调用API删除数据
    console.log('删除行:', row)
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
  }).catch(() => {
    // 取消删除
  })
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.warehouse-container {
  padding: 20px;
}

.toolbar {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.header-with-search {
  display: flex;
  flex-direction: column;
}

.header-with-search span {
  margin-bottom: 5px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
</style>
